[00:00] Welcome back. So we're getting real close to wrapping up this station details view here. Although there are a couple of data points that we are currently missing here, specifically the pH, the temperature and the viscosity tags. So instead of using some of these kind of nice looking graphics here to represent them, I did want to sort of take a different approach and I actually wanted to create a separate view to represent each one of them. So think about creating like your own sort of formatted view or like or formatted sort of label that you can style the way you want. And that gives us a good opportunity to talk about the flux repeater later on. So basically a way to sort of create a bunch of instances of the same view. So to begin with, let's go ahead and actually create a new view. So in our project browser here under perspective and views, let's go into the objects folder, I'm going to right click on that folder. I'll create a new view, let's call this Data Card, we will use a root container type of a flex container, just like we've been doing.

[01:04] And I don't need a page URL we're only ever going to embed it inside of another view. And let's see, it doesn't need to be this big here. And maybe I'll resize it to something like that 400 ish by 100 ish. Still not certain how large actually want this yet, but this is fine. Okay, so my thought is kind of like how our property editor over here it has the name or property, colon, and then a value, I want to do something kind of like that. Although I do want to have the extra flexibility of maybe incorporating a unit. So maybe we'll have like three labels up here, that will sort of stylize. So let's head over to the component panel. And I do have my label over here. But we'll go ahead and add three labels, two and three. Now I'm thinking of presenting this information in a horizontal manner. So let's go ahead and change the direction of our container to a row and of course, that looks lovely right there. So what I'm going to do is I'm going to click on some empty space here on the right, I'm going to select all three of those labels.

[02:07] And let's go ahead and because we're in a flex container, we can just tell them all to grow. So let's grow to one, hit Enter. And that way, they sort of nicely spaced out. Okay, so this view is going to be embedded inside of another view which means if we needed to pass any sort of unique information into any of the components in this view, we're most likely going to need to make use of view parameters. So we'll create a view parameter for each one of these labels. Now, just so I don't confuse myself, let's head over to the project browser. Let's actually rename these one at a time. So we'll start with the top one here, the top one is going to be the leftmost label, we're going to use this to show off the name of whatever data point we're trying to use. So let's change the name here. Instead of label this will be name label. I'll select the next one, this will be value label. And we'll change the last one I'm hitting Enter each time I finish typing.

[03:01] This will be the unit label. Alright, next let's actually create our view parameters. And then we'll configure some bindings on the text properties of each one of these components. So we'll select the data card. And under the PARAMS category properties, there will click the little plus button there. Let's add a value type. And for the first one, I'm going to call this just, Name. Now I'm going to type all of these in lowercase. Later on, we're going to have the option when we're creating instances of this data card. We can actually define view parameters by name, but we have to be mindful of casing, so we want to use the same casing throughout. So I'll just type these with a lowercase. And let's put in some placeholder values as well. So for the value of name here, let's just type in name, also lowercase, we'll click Add View Parameter, add another value. I'll call this one value, and we'll just use a value of value. We'll add another value object. And we'll call this one unit, and we'll change its value to unit.

[04:06] Okay, so we have these three here. Let's go ahead and on our label components, let's go ahead and bind the value of the text properties on these labels to these view parameters. So I'll start with the leftmost one, which is our name label, we will take the text property on this name label will create a binding. And we'll do a property binding. And again, that's because the property that we're placing the binding on is going to be bound to a view parameter which is considered a property. So we'll select property as the type. In this little field here or to the right of the field, we'll click the little property browser button. We'll go into view, we'll go into the PARAMS folder and we'll select name, we'll click OK. And we can check the little view parameter. All right, that looks good. Now a little thought since we're configuring this here, as I kind of mentioned earlier, I wanted to sort of look like it does in the property editor. So the name of the property colon. ALl right, so I need to add that colon somewhere.

[05:02] So my thought is, why don't we just add a quick little transform that will force on a colon or concatenate a colon to the end of whatever value this binding retrieves. So we'll add a quick transform, we'll click Add Transform. I'll select expression, I'll click Add Transform again. And I'll scroll and just zoom in a little bit so you can see and I'll change the font size here. So you can see, I'll put a space down, I'll put a plus sign down and put an open quotes, colon, closing quotes. Now that might be kind of hard to see in the video here that it is actually adding the colon to the end of the binding review, we can also click OK, though. And we can see that it did change the correct value. And it does have a colon here, so that looks about right. All right, we will switch over to the value label. We'll go to the text property here, we'll click the binding icon, we will select a property binding again. Again, we'll browse for properties. Under the View PARAMS just like last time, we'll grab value and click OK.

[06:05] Now, we do have a little bit of an option here. So I do plan on using this to show those three highlight texts. So pH, temperature and viscosity, which are all a numbers, those are all numbers right there. So if you wanted to, we could actually add a format transform here that will do all of the numerical formatting for us. Alternatively, if we ever wanted to generalize this view, so that it could be used with like string data types, for example, or other data types, then maybe we wouldn't want to do that. So again, you kind of want to have an idea of where you're going with this view and where you plan on using it. So for our purposes here, I think I am going to just apply that quick little numerical formatting. So we'll add another transform. We will do a format type, click Add Transform. And we will change the format, change it to Pattern. And how about pound zero dot zero zero. So try to always show two decimal places. Now in this case, it is actually going to air out because well we're bringing in a value of value, which is a string, but that's okay, we can play around with the formatting a little bit later and test it out.

[07:08] So I'll click OK for right now. And it is going to give us a little bit error of an error. But that's fine we'll skip over that for right now. We'll select our unit label. And we'll apply a binding here, we'll click the binding icon next to text. Again, property binding. We'll browse one more time, under view go to PARAMS grabbing units, click OK. And there's not really a transformer I'm going to add here. So we can just click OK. Alright, so that looks fine. It seems like it's working, it is kind of bothering me that it says error in the middle there. So I think what I'll do is we'll go up to data card. And we'll look at the value property. And let's change the value to 123 and hit Enter. And there we are, we can see it's doing the actual formatting for us as adding the two zeros at the end. All right, so let's do a little bit of styling here. Before we wrap this up, how about we right align both of the value and then the name here. And I thought being that I do want the value to be kind of close to the unit there.

[08:04] So we can get rid of this little gap here. And then I kind of want to write a line in the name here, because we are going to have quite the difference in character length for our different displays here. So we have temperature, which is pretty long, and then pH which is really short. So it might look nicer if we just right align them all. So I will select the name label, I'll hold Ctrl. I'll click on value labels. So I have both of those selected. And we can apply styling to both at the same time. So let's head over to the property editor. For style, we'll open up the Style Editor. And then for text, let's change the alignment to right. Alright, that looks pretty good. Although that is coming in a little close on the unit there, those two are kind of close to each other. So one of the things we could do is we could add a little bit of a margin in between. So maybe I'll play it on the rightmost label here. So for the unit label, let's go to style here. We'll go to the Style Editor, we'll go to Margin and Padding. And just to the left side here, how about we do maybe five pixels? That seems fine, we'll do that.

[09:09] And then a little thought occurred, we did actually for our value label here. Technically, that is showing some data, some moving data here and we do have a style class for that. So why don't I go ahead and just single select that. And then we'll go to classes here under style. We'll add our text data style class. There we go. Now let's actually apply some formatting to the entire thing here. So how about we change the background color and maybe put on a little bit of a border? So let's go to the root container. So you can kind of click on the outside of the view over here in the background, or you can just select it in the project browser. But let's select that and let's go over to the style property here. Let's open up the Style Editor. And let's do a couple of things. Let's change the background first. So we'll go to background here. And we've been using those built in variables. So let's let's continue with that. So I'll type in var open parenthesis dash dash. Let's do neutral 30 for this one and put a closing parenthesis, and then let's add a little bit of a border.

[10:06] So we'll go down to the border category here, we will set the border style to solid. It's a little bit thicker than I'm hoping then I was hoping it'd be. So maybe we can set it to one pixel looks good. And then for the border color, let's use another color variable, how about neutral 50, so far, parenthesis dash dash, neutral 50, closing parenthesis. Now, I would like some round edges on the borders here. Otherwise, it's going to do sharp angular ones. So what I can do is I can select all corners, clicking a border radius, and then we can type something in here. So I'm about six pixels. And it's kind of hard to see in here, let's click OK, and select one of my labels to change selection. And it's kind of faint. But yeah, it does actually add a little bit of rounding and probably a little bit more noticeable when we're not looking at it from just this little view here. So that looks good to me. I think now is actually a good time to wrap this up. So let's save our project.

[11:03] And then in the next video, let's take a look at creating a flux repeater and then creating a bunch of copies of this new data card. I'll see you then.